<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 直接在html中编写JavaScript代码(了解) -->
  <button onclick="console.log('按钮一')">按钮1</button>
  <button class="btn2">按钮2</button>
  <button class="btn3">按钮3</button>

  <script>
    var btn2El = document.querySelector('.btn2')
    var btn3El = document.querySelector('.btn3')

    function handleClick01() {
      console.log("按钮2发生了点击")
    }
    function handleClick02() {
      console.log("按钮2的第二个处理函数")
    }


    btn2El.onclick = handleClick01
    btn2El.onclick = handleClick02//会覆盖


    btn3El.addEventListener("click", function () {
      console.log("第一个btn3")
    })
    btn3El.addEventListener("click", function () {
      console.log("第二个btn3")
    })

  </script>
</body>

</html>